import React, {Component} from "react";
import TheLoading from "@/components/TheLoading";
import {Row, Col, Card, List, Input} from "antd";
import PlusCard from "../plus/card"
import PlusList from "../plus/list"
import PlusChartLine from "../plus/chart";
import PropTypes from "prop-types";
import {Drag} from "mys-react";
import {PlusOutlined} from '@ant-design/icons'
import TheDialog from "../../../components/TheDialog";
import RowAdd from "../plus/addForm/rowAdd";
import ColAdd from "../plus/addForm/colAdd";
import ToDoList from "../plus/toDoList";
import TheFunnelChart from "../../../components/TheFunnelChart";
import Funnel from "../plus/funnel";

class Home extends Component {

    state = {
        type: '',
        visible: false,
        title: ''
    }
    openDialog = type => {
        if (type === 'row') {
            this.setState({
                type: 'row',
                visible: true,
                title: '新增(行)'
            })
        }
        if (type === 'col') {
            this.setState({
                type: 'col',
                visible: true,
                title: '新增(列)'
            })
        }
    }
    handleCancel = () => {
        this.setState({
            visible: false
        })
    }
    onFinish = value => {
        const {type} = this.state
        if (type === 'row') {
            const row = {
                cols: [{
                    colUnit: value.colUnit,
                    colStyle: value.colStyle || {},
                    type: value.type,
                    val: value.val
                }],
                rowStyle: value.rowStyle || {},
            }
            console.log(row)
            this.handleCancel()
        }
        if (type === 'col') {
            const col = {
                ...value,
                colStyle: value.colValue || {}
            }
            this.handleCancel()
        }
    }

    componentDidMount() {
        const {dataSource} = this.props

    }

    render() {
        const {dateType, editMode} = this.props;
        return <div style={{
            padding: '0 20px 20px',
            display: "grid",
            gridTemplateColumns: "100%",
            gridRowGap: 20
        }}>
            <PlusCard editMode={editMode} dateType={dateType}/>
            <PlusChartLine dateType={dateType} grid={3} url={'/admin/auth/getIndexCenterTop'}/>
            <div style={{
                display: "grid",
                gridTemplateColumns: "66.5% 33%",
                justifyContent: "space-between"
            }}>
                <ToDoList dateType={dateType}/>
                <Funnel dateType={dateType}/>
            </div>
            <div style={{
                display: "grid",
                gridTemplateColumns: "repeat(3,33%)",
                justifyContent: "space-between"
            }}>
                <PlusChartLine dateType={dateType} grid={1} url={'/admin/auth/newAndOld'}/>
                <PlusChartLine dateType={dateType} grid={1} url={'/admin/auth/goods'}/>
                <PlusChartLine dateType={dateType} grid={1} url={'/admin/auth/memberDayLong'}/>
            </div>
            <PlusList dateType={dateType}/>
        </div>
    }
}

Home.propTypes = {
    userStyle: PropTypes.array,
    handleCancel: PropTypes.func
};
Home.defaultProps = {
    userStyle: []
};

const mapStateToProps = state => {
    return {
        user: state.user
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
        openLoading: data => {
            dispatch({type: 'OPENPAGELOADING', data: true})
        },
        closeLoading: data => dispatch({type: 'CLOSEPAGELOADING', data: false}),
    }
}

export default Home;